import { useObserver } from 'mobx-react-lite';
import { cartStore } from '../stores/cartStore';

export const Cart = () => {
  return useObserver(() => {
    const items = cartStore.cartItems;

    return (
      <div className="cart">
        <h2>🛒 购物车 ({cartStore.totalQuantity})</h2>

        {items.length === 0 ? (
          <p className="empty">购物车是空的，快去买买买吧</p>
        ) : (
          <>
            <ul>
              {items.map(item => (
                <li key={item.id}>
                  <div className="item-info">
                    <span className="icon">{item.image}</span>
                    <span className="name">{item.name}</span>
                  </div>
                  <div className="controls">
                    <button onClick={() => cartStore.decreaseQuantity(item.id)}>
                      -
                    </button>
                    <span>{item.quantity}</span>
                    <button onClick={() => cartStore.increaseQuantity(item.id)}>
                      +
                    </button>
                  </div>
                  <div className="subtotal">¥{item.price * item.quantity}</div>
                  <button
                    className="remove"
                    onClick={() => cartStore.removeFromCart(item.id)}
                  >
                    x
                  </button>
                </li>
              ))}
            </ul>
            <div className="total">
              <span>总计:</span>
              <strong>¥{cartStore.totalPrice}</strong>
            </div>
            <button className="checkout">去结算</button>
          </>
        )}
      </div>
    );
  });
};